Vue项目部署至GitHub Pages

发表于 | 分类于 ，

Vue项目部署至GitHub Pages

1.在 vue.config.js 中设置正确的 publicPath。

如果打算将项目部署到 https://<USERNAME>.github.io/ 上 , publicPath 将默认被设为 "/"，你可以忽略这个参数。

如果打算将项目部署到 https://<USERNAME>.github.io/<REPO>/ 上, (换句话说 仓库地址为 https://github.com/<USERNAME>/<REPO>), 可将 publicPath 设为 "/<REPO>/" 。 举个例子， 如果仓库名字为 “my-project”，vue.config.js 的内容应如下所示:

1
2
3
4
5
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

注意：此处是将原来的vue.config.js文件中的所有内容删除，然后复制上述内容进去，修改仓储名称即可

2.在项目目录下， 用以下的代码创建 deploy.sh（可以适当地取消注释）并运行它以进行部署：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

deploy.sh运行方式为：在当前目录下右键Git Bash here,然后输入sh deploy.sh即可

以收银系统为例，运行完成后，在浏览器中输入https://thisnautilus.github.io/cashierdisplay/即可实现所需效果。

参考链接：https://cli.vuejs.org/zh/guide/deployment.html#platform-guides